<script setup lang='ts'>
import { computed } from 'vue'
import { useUserStore } from '../store'
import UserDAL from '../user/userdal'
import message from '../utils/message'
import { modalUserSpace } from '../utils/modal'
import AliUser from '../aliapi/user'

const userStore = useUserStore()

const handleUserChange = (val: any, user_id: string) => {
  if (val) UserDAL.UserChange(user_id)
}
const handleRefreshUserInfo = () => {
  UserDAL.UserRefreshByUserFace(userStore.user_id, false).then((success) => {
    if (success) message.info('刷新用户信息成功')
    else message.error('刷新用户信息失败')
  })
}

const handleSign = () => {
  AliUser.ApiUserSign(userStore.GetUserToken)
}

const handleUserSpace = () => {
  modalUserSpace()
}

const handleLogOff = () => {
  UserDAL.UserLogOff(useUserStore().user_id)
}

const handleLogin = () => {
  if (window.WebClearCookies) {
    window.WebClearCookies({ origin: 'https://auth.aliyundrive.com', storages: ['cookies', 'localstorage'] })
  }
  useUserStore().userShowLogin = true
}

const userList = computed(() => {
  if (userStore.user_id) return UserDAL.GetUserList()
  else return []
})

const getUserName = computed(() => {
  let userName = userStore.GetUserToken.nick_name || userStore.GetUserToken.user_name
  if (userName.length > 3) {
    return userName.substring(0, 3) + '...'
  } else {
    return userName
  }
})

</script>

<template>
  <a-popover position='br' trigger='hover'>
    <a-avatar v-if='userStore.userLogined' :size='28' style='margin-right: 12px'><img
      :src='userStore.GetUserToken.avatar' /></a-avatar>
    <a-avatar v-else :size='28' style='margin-right: 12px' :style="{ backgroundColor: '#3370ff' }">登录</a-avatar>

    <template #content>
      <div v-if='userStore.userLogined' style='width: 300px'>
        <a-row justify='center' align='stretch'>
          <a-col flex='150px'>
            <div class='username'>
              Hi {{ getUserName }}
              <span v-if='userStore.GetUserToken.vipIcon'>
                <img width='65'
                     :src='userStore.GetUserToken.vipIcon'
                     :title='userStore.GetUserToken.vipname + "，过期时间："+ userStore.GetUserToken.vipexpire'
                     alt='会员信息' />
              </span>
            </div>
          </a-col>
          <a-col flex='none'>
            <a-button type='text' size='small' tabindex='-1'
                      style='min-width: 20px; padding: 0 8px'
                      title='刷新账号信息'
                      @click='handleRefreshUserInfo()'>刷新
            </a-button>
            <a-button type='text' size='small' tabindex='-1'
                      style='min-width: 20px; padding: 0 8px'
                      title='每日签到'
                      @click='handleSign()'>签到
            </a-button>
            <a-button type='text' size='small' tabindex='-1'
                      style='min-width: 20px; padding: 0 8px'
                      title='退出该账号'
                      @click='handleLogOff()'> 退出
            </a-button>
          </a-col>
        </a-row>

        <a-row justify='center' align='stretch'>
          <a-col flex='150px'>
            <span class='userspace'>{{ userStore.GetUserToken.spaceinfo }}</span>
          </a-col>
          <a-col flex='auto'></a-col>
          <a-col flex='none'>
            <a-button type='text' size='small' tabindex='-1' style='min-width: 46px; padding: 0 8px' status='warning'
                      @click='handleUserSpace()'>容量详情
            </a-button>
          </a-col>
        </a-row>

        <a-list style='margin: 12px 0 24px 0' :max-height='300' size='small' :data='userList' class='userlist'
                :data-refresh='userStore.user_id'>
          <template #header>
            <div class='userspace'>切换到其他账号</div>
          </template>
          <template #item='{ item, index }'>
            <a-list-item :key='index'>
              <div style='padding-right: 8px' :title='item.spaceinfo'>
                <a-progress type='circle' size='mini' status='warning' :percent='item.used_size / item.total_size' />
              </div>
              <span :title='item.user_name'
                    style='max-width:300px;display:inline-block;'>{{ item.nick_name ? item.nick_name : item.user_name
                }}</span>
              <a-switch size='small' :model-value='userStore.user_id == item.user_id' title='切换到这个账号'
                        tabindex='-1' @change='handleUserChange($event, item.user_id) '>
                <template #checked> 当前</template>
                <template #unchecked> 选我</template>
              </a-switch>
            </a-list-item>
          </template>
        </a-list>

        <a-row justify='center'>
          <a-button type='outline' size='small' tabindex='-1' style='margin: 0 0 8px 0' title='Alt+L'
                    @click='handleLogin()'> 登录一个新账号
          </a-button>
        </a-row>
      </div>
      <div v-else style='width: 250px'>
        <a-row align='stretch'>
          <a-col flex='60px'>
            <a-avatar :size='56'
            ><img
              src=''
            /></a-avatar>
          </a-col>
          <a-col flex='auto'>
            <span class='username'>Welcome</span>
            <br />
            <span class='userspace'>还没登录账号?</span>
          </a-col>
        </a-row>
        <a-divider />
        <a-row justify='center'>
          <a-button type='outline' size='small' tabindex='-1' style='margin: 0 0 8px 0' title='Alt+L'
                    @click='handleLogin()'> 登录一个新账号
          </a-button>
        </a-row>
      </div>
    </template>
  </a-popover>
</template>
<style>
.username {
  display: inline-block;
  width: 150px;
  overflow: hidden;
  font-size: 18px;
  white-space: nowrap;
  word-break: keep-all;
  text-overflow: ellipsis;
}

.userspace {
  margin: 0;
  display: inline-block;
  max-width: 170px;
  line-height: 30px;
  overflow: hidden;
  color: #8a9ca5;
  white-space: nowrap;
  word-break: keep-all;
  text-overflow: clip;
}

.userlist {
  width: 100%;
}

.userlist .arco-list-header,
.userlist .arco-list-item {
  flex-shrink: 0;
  box-sizing: border-box;
  height: 38px;
  padding: 8px 12px !important;
  line-height: 22px !important;
  overflow: hidden;
}

.userlist .arco-list-item .arco-list-item-content {
  display: inline-flex;
  align-items: center;
  width: 100%;
}

.userlist .arco-list-item .arco-list-item-content > span {
  display: inline-block;
  flex: 1;
  overflow: hidden;
  white-space: nowrap;
  word-break: keep-all;
  text-overflow: ellipsis;
}
</style>
